<template>
      <div class="img_show">
        <!-- 此时：图片需要改变地址 -->
      <div class="img_top">
        <img class="img_ye_one" :src="require('../../../assets/img/sy1.png')" alt />
        <div class="img_right">
          <img class="img_ye_two" :src="require('../../../assets/img/sy2.png')" alt />
          <img class="img_ye_three" :src="require('../../../assets/img/sy3.png')" alt />
        </div>
      </div>
      <div class="show_bottom">
        <div class="bottom_btn">
          <button @click="changeN(0)" :class="[n==0?'active':'']">双十一尖货</button>
          <button @click="changeN(1)" :class="[n==1?'active':'']">畅销全球</button>
        </div>
        <div class="bottom_img">
          <img :src="require('../../../assets/img/ban2.png')" alt="">
          <img :src="require('../../../assets/img/ban3.png')" alt="">
          <img :src="require('../../../assets/img/ban4.png')" alt="">
          <img :src="require('../../../assets/img/ban5.png')" alt="">
        </div>
      </div>
    </div>

</template>

<script>
export default {
data(){
    return{
         n: 0
    }
},
methods:{
     changeN(n) {
      this.n = n;
    }
}
}
</script>

<style scoped>
.img_show {
  padding: 0.3rem;
  /* height: 2.95rem; */
}
.img_ye_one {
  width: 3.2rem;
  height: 3rem;
}
.img_right {
  float: right;
}
.img_ye_two {
  width: 3.2rem;
  height: 1.76rem;
  display: block;
}
.img_ye_three {
  margin-top: 0.08rem;
  width: 3.2rem;
  height: 1.14rem;
  display: block;
}

/*  */
.show_bottom {
  height: 2.14rem;
}
.bottom_btn {
  display: flex;
  /* justify-content: space-between; */
  text-align: center;
  height: 0.7rem;
  line-height: 0.7rem;
}
.bottom_btn button {
  border: none;
  background-color: none;
  flex: 1;
  text-align: center;
  font-size: 0.24rem;
  color: #adadad;
}
.active {
  color: #e27669 !important;
  font-size: large !important;
  font-weight: 800 !important;
}
.bottom_img{
  display: flex;
  justify-content: space-between;
}
.bottom_img img{
  flex: 1;
  width: 1.4rem;
  height: 1.4rem;
}
</style>